<template>
    <teleport to="#back">
      <div
        class="d-flex justify-content-center align-items-center h-100 w-100 loading-container"
        :style="{backgroundColor: background || '', 'font-size': '14px'}"
      >
        <div class="loading-content">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">{{ text || 'loading'}}</span>
          </div>
          <p v-if="text" class="text-primary small">{{text}}</p>
        </div>
      </div>
    </teleport>
    </template>
    
    <script lang="ts">
    import { defineComponent, onUnmounted } from 'vue'
    import useDOMCreate from '../hooks/useDOMCreate'
    export default defineComponent({
      props: {
        text: {
          type: String
        },
        background: {
          type: String
        }
      },
      setup() {
        useDOMCreate('back')
        // const node = document.createElement('div')
        // node.id = 'back'
        // document.body.appendChild(node)
        // onUnmounted(() => {
        //   document.body.removeChild(node)
        // })
      }
    })
    </script>
    
    <style>
@media (max-width: 768px) {
  .loading-container {
    background: rgba(255, 255, 255, .5);
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    /* 适配移动端 */
    font-size: 14px;
  }
}
</style>
    